<template>
	<!-- 调用 -->
	<div class="city">
		<city-header></city-header>
		<city-list :hotcites='hotcites' :citys='citys'></city-list>
	</div>
</template>

<script>
	//引入组件
	import CityHeader from './pages/Header'
	import CityList from './pages/List'
	//引入axios
	import axios from 'axios'
	//导出
	export default{
		components:{
			CityHeader,
			CityList,
		},
		data(){
			return{
				hotcites:[],
				citys:[]
			}
		},
		mounted(){
			axios.get('./city.json').then((res)=>{
				const data = res.data.data[0]
				//分解数据
				this.hotcites=data.hotCities;
				this.citys=data.city;
			})
		}
	}
</script>

<style>
	.city{
		background-color: #ddd;
	}
</style>
